<template>
  <table class="table-bordered" border="1">
    <tr>
      <td>房型名称</td>
      <td>
        <input type="text" v-model="roomtype.rType_Name" />
      </td>
    </tr>
    <tr>
      <td>房型价格</td>
      <td>
        <input type="text" v-model="roomtype.rType_Price" />
      </td>
    </tr>
    <tr>
      <td>押金</td>
      <td>
        <input type="text" v-model="roomtype.rType_Deposil" />
      </td>
    </tr>
    <tr>
      <td>面积</td>
      <td>
        <input type="text" v-model="roomtype.rType_Size" />
      </td>
    </tr>
    <tr>
      <td>可住人数</td>
      <td>
        <input type="text" v-model="roomtype.rType_Num" />
      </td>
    </tr>
    <tr>
      <td>可否加床</td>
      <td>
        <input
          type="radio"
          name="addbed"
          :value="true"
          v-model="roomtype.rType_AddBed"
        />加床
        <input
          type="radio"
          name="addbed"
          :value="false"
          v-model="roomtype.rType_AddBed"
        />不加床
      </td>
    </tr>
    <tr>
      <td>房型图片</td>
      <td>
        <img style="width: 80px; height: 80px" :src="roomtype.rType_Img" />
        <input type="file" @change="GetRoomTypeimag" />
      </td>
    </tr>
    <tr>
      <td>房型描述</td>
      <td><input type="text" v-model="roomtype.rType_Info" /></td>
    </tr>
    <tr>
      <td>房型投放</td>
      <td>
        <input
          type="radio"
          name="state"
          :value="true"
          v-model="roomtype.rType_State"
        />投放
        <input
          type="radio"
          name="state"
          :value="false"
          v-model="roomtype.rType_State"
        />不投放
      </td>
    </tr>
    
    <tr>
      <td colspan="2">
        <input type="button" value="添加房型信息" @click="AddRoomType" />
      </td>
    </tr>
  </table>
</template>

<script setup lang="ts">
import { ref } from "vue";
import axios from "axios";

const roomtype = ref({
  rType_id: 0,
  rType_Name: "",
  rType_Price: 0,
  rType_Deposil: 0,
  rType_Size: 0,
  rType_Num: 0,
  rType_AddBed: true,
  rType_Img: "",
  rType_Info: "",
  rType_State: true,
  rType_InfoState: true,
  rType_DeleteTime: "2024-10-30T07:07:06.727Z",
});

// 上传图片
const Rtimage = ref(null);
const GetRoomTypeimag = (e: any) => {
  Rtimage.value = e.target.files[0];
  console.log(Rtimage.value);
  if (!Rtimage.value) {
    alert("请选择图片");
    return;
  }
  //创建FromData对象
  const fd = new FormData();
  fd.append("image", Rtimage.value);

  axios.post("https://localhost:7071/api/Files/RoomTypeFiles", fd)
    .then((res) => {
      console.log(res.data);
      if (res.data.fileComm_Code == 0) {
        alert(res.data.fileComm_Msg);
      } else if (res.data.fileComm_Code == 1) {
        alert(res.data.fileComm_Msg);
      } else {
        alert(res.data.fileComm_Msg);
      }
      roomtype.value.rType_Img = res.data.fileComm_Path;
    });
};

// 添加房间类型
const AddRoomType = () => {
  axios
    .post("https://localhost:7071/api/RoomType/AddRoomType", roomtype.value)
    .then((res) => {
      if (res.data > 0) {
        alert("添加成功");
      } else if (res.data == -1) {
        alert("房间类型已存在");
      } else {
        alert("添加失败");
      }
    })
    .catch((err) => {
      console.log(err);
    });
};
</script>

<style scoped>
</style>